<template>
	<view class="userInfo" style="background-color: #F3F4F5;min-height: 100vh;">
		<image src="../../static/images/user/bg.png" mode="" class="userBg"></image>
		<view class="infoHeader">
			<view class="infoOne">
				<view class="avatarOut">
					<image :src="info.avatar" mode="" class="avatar"></image>
					<image src="../../static/images/user/gender.png" mode="" class="gender"></image>
				</view>
				<view class="userInfo" style="align-items: flex-start;">
					<view class="nickName">{{info.nickname}}</view>
					<view class="age">{{info.birthday || ''}}</view>
				</view>
				<view v-if="uid!=userid" style="margin-left: auto; display: flex;">
					<view style=" margin-top: 6px; margin-right: 10px;">
						<u-button @click="goConcern" shape="circle" size="mini">{{is_concern==0?'+关注':'已关注'}}</u-button>
					</view>
					<view style=" margin-top: 6px;">
						<u-button @click="sx" shape="circle" size="mini">私信</u-button>
					</view>

				</view>
			</view>
			<view class="infoTwo">
				<view class="twoBox">
					<view class="num">{{info.concern}}</view>
					<view>关注量</view>
				</view>
				<view class="twoBox">
					<view class="num">{{info.fans}}</view>
					<view>粉丝</view>
				</view>
				<view class="twoBox">
					<view class="num">{{info.activity}}</view>
					<view>活动</view>
				</view>
				<view @click="tophoto" class="twoBox">
					<view class="num">{{info.photo}}</view>
					<view>照片</view>
				</view>
			</view>
			<view class="tabOut">
				<view class="tab" v-for="(i, index) in tabList" :class="index === select ? 'tabSelect' : ''" :key="i"
					@click="select = index,page=1,list=[], getPushList()">{{i}}</view>

			</view>
		</view>
		<view style="width: 100%;
		margin-top: 20rpx;">
			<view-NoData v-if="list.length==0">

			</view-NoData>
			<article-list :list="list" :typeActivy="select"></article-list>
		</view>
		<u-modal v-model="show" title="提示" :content='content' @confirm="jiesuo" @cancel="cancel"></u-modal>
	</view>
</template>

<script>
	import {
		userInfo
	} from '../wish/request.js'
	import {
		pushList,
		checkInfo,
		useQy
	} from './request.js'
	import {
		homeDetail,
		addConcern,
		cancelConcern,
		addLike,
		cancelLike,
		getNewsFlash
	} from "@/common/config/request.js"
	import articleList from '@/components/article/myList.vue';
	export default {
		components: {
			articleList
		},
		data() {
			return {
				is_concern: 0,
				uid: '',
				info: {},
				tabList: ['短讯', '文章', '视频'],
				select: 0,
				list: [],
				page: 1,
				show: false,
				content: '是否确定使用权益解锁该用户？',
				userid: uni.getStorageSync('userdata').id
			}
		},
		onLoad(option) {
			this.uid = option.uid
			this.is_concern = parseInt(option.is_concern)
			console.log(option, 'optionoption')
			// this.getHomeDetail(id)
		},
		onShow() {
			this.page = 1

			this.list = []
			if (this.uid != this.userid) {
				this.checkInfo()
				console.log('11111')
			} else {
				this.getInfo()
			}
		},
		onReachBottom() {
			if (this.list.length === 0) {
				this.page = 1
			} else {
				this.page++
			}
			this.getPushList()
		},
		methods: {
			sx() {
				uni.navigateTo({
					url: '/pages/TUI-Chat/chat?conversationID=C2C' + this.uid
				})
			},
			goConcern() {
				// 关注与取消关注的操作 is_concern1已关注 0关注
				let data = {
					uid: this.uid
				}
				console.log(this.is_concern, 'this.is_concern')

				if (this.is_concern == 1) {
					// 取消关注
					cancelConcern(data).then((res) => {
						if (res.data.code == 1) {
							this.is_concern = 0
							uni.showToast({
								icon: "none",
								title: '取消成功'
							})
						}
					})
				} else {
					// 关注成功
					addConcern(data).then((res) => {
						if (res.data.code == 1) {
							this.is_concern = 1
							uni.showToast({
								icon: "none",
								title: '关注成功'
							})
						}
					})
				}
			},
			// getHomeDetail(id) {
			// 	var data = {
			// 		id: id
			// 	}
			// 	homeDetail(data).then((res) => {
			// 		console.log(res, '文章详情')
			// 		if (res.data.code == 1) {
			// 			this = res.data.data
			// 		}
			// 	})
			// },
			tophoto() {
				uni.navigateTo({
					url: '/pages/my/myphoto?user_id=' + this.uid
				})
			},
			checkInfo() {
				let params = {
					uid: this.uid
				}
				checkInfo(params).then(res => {
					if (res.data.code === 1) {
						console.log(res, 'resres')
						if (res.data.data.id) {
							this.getInfo()
						} else {
							console.log('进入')
							this.show = true
						}
					}
				})
			},
			jiesuo() {
				let params = {
					uid: this.uid
				}
				useQy(params).then(res => {
					if (res.data.code === 1) {
						if (res.data.data.id) {
							this.show = false
							this.getInfo()
						} else {
							uni.navigateBack()
						}
					}
				})
			},
			cancel() {
				uni.navigateBack()
			},
			getInfo() {
				let data = {
					user_id:this.uid!=this.userid?this.uid:''
				}
			
				userInfo(data).then(res => {
					console.log(res)
					if (res.data.code === 1) {
						this.info = res.data.data
						console.log(this.info, 'ddddddddd')

					}
					this.getPushList()
				})
			},
			getPushList() {
				let params = {
					user_id: this.uid,
					type: this.select,
					limit: 10,
					page: this.page
				}
				pushList(params).then(res => {
					console.log(res.data.data.data)
					if (res.data.code === 1) {

						// res.data.data.data.forEach((item)=>{
						// 	// if(item.images!=''){
						// 	// 	item.images=item.images.split(',')
						// 	// }

						// })
						// this.list = res.data.data.data
						this.list = [...this.list, ...res.data.data.data]
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.userInfo {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.userBg {
		width: 100%;
		height: 290rpx;

	}

	.infoHeader {
		width: 100%;
		min-height: 200rpx;
		background-color: #FFFFFF;

		.infoOne {
			padding: 0 20rpx;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;

			.avatarOut {
				width: 120rpx;
				height: 120rpx;
				position: relative;
				margin-top: -30rpx;

				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				.gender {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}

			.nickName {
				color: #333333;
				font-size: 30rpx;
				margin-top: 16rpx;
				margin-left: 24rpx;
			}

			.age {
				color: #666666;
				font-size: 24rpx;
				margin-left: 24rpx;
				margin-top: 6rpx;
			}
		}

		.infoTwo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 45rpx;
			padding-bottom: 26rpx;
			border-bottom: 1rpx solid #E3E3E3;

			.twoBox {
				flex: 1;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				color: #999999;
				font-size: 26rpx;

				.num {
					color: #333333;
					font-size: 34rpx;
					margin-bottom: 14rpx;
				}
			}
		}

		.tabOut {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 86rpx;

			.tab {
				flex: 1;
				text-align: center;
				color: #666666;
				font-size: 30rpx;
				padding-bottom: 10rpx;
			}

			.tabSelect {
				color: #FA9700;
				position: relative;

			}

			.tabSelect:after {
				content: "";
				position: absolute;
				width: 64rpx;
				height: 8rpx;
				border-radius: 4rpx;
				background-color: #FA9700;
				bottom: 0;
				left: calc(50% - 32rpx);
			}
		}
	}
</style>
